<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仿美的官网</title>
</head>
<body>
    <header class="banner">
        <ul class="menu-nav">
            <li class="submenu">
                <a href="" class="menu-item">美的业务</a>
                <ul class="pop-menu">
                    <li>总览</li>
                    <li>智能家居</li>
                    <li>工业设计</li>
                    <li>楼宇科技</li>
                    <li>机器人与自动化</li>
                    <li>数字化创新</li>
                </ul>
            </li>
            <li class="submenu">
                <a href="" class="menu-item">投资者关系</a>
                <ul class="pop-menu">
                    <li>总览</li>
                    <li>致股东的信</li>
                    <li>公司治理</li>
                    <li>股票信息</li>
                    <li>财务报告</li>
                    <li>信息披露</li>
                </ul>
            </li>
        </ul>
    </header>
    <video src="./美的视频.mp4" controls></video>
    <style>
            ul{
                list-style: none;
                padding: 0;
            }
            a{
                text-decoration: none;
                color: inherit;
            }
            header{
                position: relative;
                background-color: white;
            }
            .menu-nav>.submenu{
                display: inline-block;
                margin-right: 1em;
                height: 3.5em;
            }
            .pop-menu{
                display: none;
                position: absolute;    
                background-color:darkcyan;
                z-index: 100;
                width: 100%;
                left: 0;
                top: 100%;
            }
            .menu-nav>.submenu:hover .pop-menu{
                display: block;
            }
            .submenu>.menu-item{
                display: block;
                padding: 10px;
            }
            .menu-nav>.submenu:hover .menu-item{
                border-bottom: 2px solid rgb(46, 44, 44);
            }
    </style>
    
</body>
</html>